<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
</head>
<body>
<div id="div">
    <!--v-html文本指令使用-->
    <div v-html="msg">
        {{msg}}
    </div>
    <!--绑定属性v-bind:使用,其中v-bind可以省略-->
    <div><a :href="url">百度</a></div>
    <!--v-if和v-show(仅仅使用了display这个属性使之为none)条件-->
    <div>
        <div v-if="num % 3 == 0">div1</div>
        <div v-show="flag">div4</div>
    </div>
    <ul>
        <!--v-for列表指令使用-->
        <li v-for="name,i in names">
            {{name}}--{{i}}
        </li>
        <li v-for="value,index in student">
            {{value}}--{{index}}
        </li>
    </ul>
    <!--v-on(v-on:可简写为@)事件-->
    <div @click="change">
        点我有惊喜
    </div>
        <!--v-model表单绑定-->
        <form method="get" autocomplete="off">
        {{zz}} <input type="text" name="u" v-model="zz">
        </form>
</div>
</body>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            names:["张三","李四","王五"],
            student:{
                name:"张三",
                age:23
            },
            //v-html指令使用
            msg:"<b>msg加粗</b>",
            url:"https://www.baidu.com/",
            num:1,
            flag:false,
            zz:"emm"
        },
        methods:{
            change(){
                //vue中的axios异步操作
                axios.get("/day08/axiosser?user=污渍").then(resp => alert(resp.data))
            }
        }
    });
</script>
</html>